<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   $("pre.code").text($("div#div_1").html());
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {$(".step0").hide();$(".step1").show();});
   sub.steps.push(function() {$(".step1").hide();$("#div_1").remove();$(".step2").show();$("pre.code").text($("div#div_2").html());});
   sub.steps.push(function() {$(".step3").show();});
   sub.steps.push(function() {$("pre.code").text($("a.step3").attr('onClick'));});
});

swapNodes = function(a, b) {
    var aparent= a.parentNode;
    var asibling= a.nextSibling===b? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
    $("pre.code").text($("div#div_2").html());
}
</script>

    </head> 
<body class="jsxgraph_body"> 
<ol> 
<div class=""><table><tr><td width="50%">
<a class="step3 hide" href="#" onClick="swapNodes( document.getElementById('r1'), document.getElementById('c1'));">Swap Circle and Rectangle</a>
<pre class="code">
</pre>
</td><td width="50%">
<div id="div_1" class="step1 hide"> 
<svg id="figs" xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="-3 -3 50 50">
<rect class="rect" x="5" y="2" width="30" height="20" stroke="black" stroke-width="2" fill="red" />
<circle class="circle" cx="20" cy="15" r="10" stroke="black" stroke-width="2" fill="red"/>
</svg>
</div>
<div id="div_2" class="step2 hide"> 
<svg id="figs2" xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="-3 -3 50 50">
    <style type="text/css"><![CDATA[
      .figz {
        fill: blue;
        stroke: green;
        stroke-width: 3;
      }
      .figz:hover {
        opacity: 0.5;
      }
    ]]></style>
<rect id="r1" class="figz" x="5" y="2" width="30" height="20"/>
<circle id="c1" class="figz" cx="20" cy="15" r="10"/>
</svg>
</div>
</td>
</tr></table>
</div>
</ol> 
</body> 
</html> 
